<template>
	<div class="app-container calendar-list-container organnewpage">
		<div class="filter-container">
			<el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="城市代码" v-model.trim="OrganNew.cityCode"> </el-input>
			<el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="机构名称" v-model.trim="OrganNew.organName"> </el-input>
			<el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="区域代码" v-model.trim="OrganNew.adcode"> </el-input>
			<el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="机构类目" v-model.trim="OrganNew.organCategory"> </el-input>
			<!-- <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="修改日期（年月日）" v-model="OrganNew.updateTime"> </el-input> -->
			<el-date-picker style="width: 200px;" class="filter-item" v-model="OrganNew.updateTime" formatter="yyyy-MM-dd" @change="getSTime" type="date" placeholder="修改日期（年月日）"></el-date-picker>
			<el-select style="width: 200px;" class="filter-item" v-model="selOpton" placeholder="请选择">
				<el-option v-for="item in optionsSearch" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<!-- <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="状态：默认为1（有效）" v-model="OrganNew.state"> </el-input> -->
			<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
			<el-button class="filter-item" v-if="organNewManager_btn_add" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="edit">添加</el-button>
		</div>
		<div class="filter-container">
			<input v-if="organNewManager_btn_uploading" class="filter-item" type="file" @change="getFile($event)">
			<el-button v-if="organNewManager_btn_uploading" class="filter-item" style="margin-left: 10px;" @click="submit($event)" type="primary" icon="">上传</el-button>
			<a v-if="organNewManager_btn_download" href="/api/organNew/excle"><el-button class="filter-item" style="margin-left: 10px;" type="primary">点击下载Excel
			</el-button></a>

		</div>
		<el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
			<el-table-column type="index" label="序号" header-align="center" align="center" width="65">
				<template scope="scope"><span>{{scope.$index+(OrganNew.page - 1) * OrganNew.limit + 1}} </span></template>
			</el-table-column>
			<el-table-column align="center" label="id" width="65" v-if="false">
				<template scope="scope">
					<span>{{scope.row.id}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200px" align="center" label="城市代码（名称）">
				<template scope="scope">
					<span>{{scope.row.cityCode}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200px" align="center" label="机构类型（名称）">
				<template scope="scope">
					<span>{{scope.row.organType}}</span>
				</template>
			</el-table-column>
			<el-table-column width="400px" align="center" label="机构名称">
				<template scope="scope">
					<span>{{scope.row.organName}}</span>
				</template>
			</el-table-column>
			<el-table-column width="400px" align="center" label="机构地址">
				<template scope="scope">
					<span>{{scope.row.organAddress}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200px" align="center" label="区域编码（名称）">
				<template scope="scope">
					<span>{{scope.row.adcode}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200px" align="center" label="机构类目（名称）">
				<template scope="scope">
					<span>{{scope.row.organCategory}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200px" align="center" label="状态">
				<template scope="scope">
					<span>{{scope.row.state}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200px" align="center" label="更新时间">
				<template scope="scope">
					<span>{{scope.row.updateTime}}</span>
				</template>
			</el-table-column>
			<el-table-column fixed="right" align="center" label="操作" width="150">
				<template scope="scope">
					<el-button v-if="organNewManager_btn_view" size="small" type="success" @click="checkedFn(scope.row)">查看
					</el-button>
					<el-button v-if="organNewManager_btn_edit" size="small" type="success" @click="handleUpdate(scope.row)">编辑
					</el-button>
					<el-button v-if="organNewManager_btn_del" size="small" type="danger" @click="handleDelete(scope.row)">作废
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div v-show="!listLoading" class="pagination-container">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="OrganNew.page" :page-sizes="[10,20,30, 50]" :page-size="OrganNew.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
		</div>
		<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
			<el-form :model="form" :rules="rules" ref="form" label-width="100px">
				<el-form-item label="城市代码" prop="cityCode">
					<el-input v-model="form.cityCode" placeholder="请输入城市代码"></el-input>
				</el-form-item>
				<el-form-item label="机构类型" prop="organType">
					<!-- <el-input v-model="form.organType" placeholder="请输入机构类型，H:医院；P:药店"></el-input> -->
					<el-select v-model="jgAddOpton" @change="getjgSel" placeholder="请选择机构类型">
						<el-option v-for="item in jgAddSel" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="机构名称" prop="organName">
					<el-input v-model="form.organName" placeholder="请输入机构名称"></el-input>
				</el-form-item>
				<el-form-item label="机构地址" prop="organAddress">
					<el-input v-model="form.organAddress" placeholder="请输入机构地址"></el-input>
				</el-form-item>
				<el-form-item label="机构跳转地址" prop="organAccessUrl">
					<el-input v-model="form.organAccessUrl" placeholder="请输入机构跳转地址"></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="state">
					<!-- <el-input v-model="form.state" placeholder="请输入状态"></el-input> -->
					<el-select v-model="ztAddOpton" @change="getztSel" placeholder="请选择状态">
						<el-option v-for="item in ztAddSel" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="经度" prop="longitude">
					<el-input v-model="form.longitude" placeholder="请输入经度"></el-input>
				</el-form-item>
				<el-form-item label="维度" prop="latitude">
					<el-input v-model="form.latitude" placeholder="请输入维度"></el-input>
				</el-form-item>
				<el-form-item label="区域" prop="area">
					<el-input v-model="form.area" placeholder="请输入区域"></el-input>
				</el-form-item>
				<el-form-item label="机构类目" prop="organCategory">
					<el-input v-model="form.organCategory" placeholder="请输入机构类目：医院资质、药店品牌"></el-input>
				</el-form-item>
				<el-form-item label="区域代码" prop="adcode">
					<el-input v-model="form.adcode" placeholder="请输入区域编码"></el-input>
				</el-form-item>
				<el-form-item label="拼音首字母" prop="pycode">
					<el-input v-model="form.pycode" placeholder="请输入拼音首字母"></el-input>
				</el-form-item>
				<el-form-item label="机构类别" prop="organCatagery">
					<el-input v-model="form.organCatagery" placeholder="请输入机构类别，现在区分少儿与成人。少儿：children"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel('form')">取 消</el-button>
				<el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button>
				<el-button v-if="dialogStatus=='update'" type="primary" @click="update('form')">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisibleView">
			<el-form :model="form" :rules="rules" ref="form" label-width="100px">
				<el-form-item label="城市代码" prop="cityCode">
					<el-input v-model="form.cityCode" readonly></el-input>
				</el-form-item>
				<el-form-item label="机构类型" prop="organType">
					<!-- <el-input v-model="form.organType" placeholder="请输入机构类型，H:医院；P:药店"></el-input> -->
					<el-select v-model="jgAddOpton" @change="getjgSel">
						<el-option v-for="item in jgAddSel" :key="item.value" :label="item.label" :value="item.value" :disabled=true>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="机构名称" prop="organName">
					<el-input v-model="form.organName" readonly></el-input>
				</el-form-item>
				<el-form-item label="机构地址" prop="organAddress">
					<el-input v-model="form.organAddress" readonly></el-input>
				</el-form-item>
				<el-form-item label="机构跳转地址" prop="organAccessUrl">
					<el-input v-model="form.organAccessUrl" readonly></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="state">
					<!-- <el-input v-model="form.state" placeholder="请输入状态"></el-input> -->
					<el-select v-model="ztAddOpton" @change="getztSel">
						<el-option v-for="item in ztAddSel" :key="item.value" :label="item.label" :value="item.value" :disabled=true>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="经度" prop="longitude">
					<el-input v-model="form.longitude" readonly></el-input>
				</el-form-item>
				<el-form-item label="维度" prop="latitude">
					<el-input v-model="form.latitude" readonly></el-input>
				</el-form-item>
				<el-form-item label="区域" prop="area">
					<el-input v-model="form.area" readonly></el-input>
				</el-form-item>
				<el-form-item label="机构类目" prop="organCategory">
					<el-input v-model="form.organCategory" readonly></el-input>
				</el-form-item>
				<el-form-item label="区域代码" prop="adcode">
					<el-input v-model="form.adcode" readonly></el-input>
				</el-form-item>
				<el-form-item label="拼音首字母" prop="pycode">
					<el-input v-model="form.pycode" readonly></el-input>
				</el-form-item>
				<el-form-item label="机构类别" prop="organCatagery">
					<el-input v-model="form.organCatagery" readonly></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel('form')">取 消</el-button>
				<el-button type="primary" @click="cancel('form')">确 定</el-button>
			</div>
		</el-dialog>
		<el-button type="primary" element-loading-text="正在上传..." element-loading-background="rgba(0, 0, 0, 0.7)" v-loading.fullscreen.lock="fullscreenLoading"></el-button>
	</div>
</template>

<script>
	import {
		page,
		addObj,
		getObj,
		delObj,
		putObj
	} from 'api/admin/organNew/index';
	import {
		getToken
	} from 'utils/auth';
	import { mapGetters } from 'vuex';
	import axios from 'axios';
	export default {
		name: 'organNew',
		data() {
			return {
				fullscreenLoading: false,
				optionsSearch: [{
					value: '1',
					label: '有效'
				}, {
					value: '0',
					label: '无效'
				}],
				selOpton: '1',
				jgAddSel: [{
					value: 'H',
					label: '医院'
				}, {
					value: 'P',
					label: '药店'
				}],
				jgAddOpton: '',
				ztAddSel: [{
					value: '1',
					label: '有效'
				}, {
					value: '0',
					label: '无效'
				}],
				ztAddOpton: '',
				form: {
					cityCode: undefined,
					organType: undefined,
					organName: undefined,
					organAddress: undefined,
					organAccessUrl: undefined,
					state: undefined,
					createTime: undefined,
					updateTime: undefined,
					longitude: undefined,
					latitude: undefined,
					area: undefined,
					organCategory: undefined,
					adcode: undefined,
					pycode: undefined,
					organCatagery: undefined
				},
				rules: {
					/*  cityCode: [
  {
    required: true,
    message: '请输入城市代码',
    trigger: 'blur'
  },
  {
    min: 0,
    max: 10,
    message: '长度在 0 到 10 个字符',
    trigger: 'blur'
  }
],   organType: [
  {
    required: true,
    message: '请输入机构类型，H:医院；P:药店',
    trigger: 'blur'
  },
  {
    min: 0,
    max: 12,
    message: '长度在 0 到 12 个字符',
    trigger: 'blur'
  }
],   organName: [
  {
    required: true,
    message: '请输入机构名称',
    trigger: 'blur'
  },
  {
    min: 0,
    max: 64,
    message: '长度在 0 到 64个字符',
    trigger: 'blur'
  }
],   organAddress: [
  {
    required: true,
    message: '请输入机构地址',
    trigger: 'blur'
  },
  {
    min: 0,
    max: 300,
    message: '长度在 0 到 300 个字符',
    trigger: 'blur'
  }
],   organAccessUrl: [
  {
    required: true,
    message: '请输入机构跳转地址',
    trigger: 'blur'
  },
  {
    min: 0,
    max: 300,
    message: '长度在 0 到 300 个字符',
    trigger: 'blur'
  }
],   state: [
  {
    required: true,
    message: '请输入状态',
    trigger: 'blur'
  },
  {
    min: 0,
    max: 1,
    message: '默认输入1',
    trigger: 'blur'
  }
],   area: [
  {
    required: true,
    message: '请输入区域',
    trigger: 'blur'
  },
  {
    min: 1,
    max: 20,
    message: '长度在 1 到 20 个字符',
    trigger: 'blur'
  }
],   organCategory: [
  {
    required: true,
    message: '请输入机构类目：医院资质、药店品牌',
    trigger: 'blur'
  },
  {
    min: 1,
    max: 20,
    message: '长度在 1 到 20 个字符',
    trigger: 'blur'
  }
],   adcode: [
  {
    required: true,
    message: '请输入区域编码',
    trigger: 'blur'
  },
  {
    min: 1,
    max: 10,
    message: '长度在 1 到 10 个字符',
    trigger: 'blur'
  }
],   pycode: [
  {
    required: true,
    message: '请输入拼音首字母',
    trigger: 'blur'
  },
  {
    min: 1,
    max: 10,
    message: '长度在 1 到 10 个字符',
    trigger: 'blur'
  }
],   organCatagery: [
  {
    required: true,
    message: '请输入机构类别，现在区分少儿与成人。少儿：children',
    trigger: 'blur'
  },
  {
    min: 1,
    max: 20,
    message: '长度在 1 到 20 个字符',
    trigger: 'blur'
  }
]   */
				},
				list: null,
				total: null,
				listLoading: true,
				OrganNew: {
					page: 1,
					limit: 10
				},
				dialogFormVisible: false,
				dialogFormVisibleView: false,
				dialogStatus: '',
				organNewManager_btn_view: false,
				organNewManager_btn_edit: false,
				organNewManager_btn_del: false,
				organNewManager_btn_add: false,
				textMap: {
					update: '编辑',
					create: '创建',
					checked: '查看'
				},
				tableKey: 0
			}
		},
		created() {
			this.getList();
			this.organNewManager_btn_view = this.elements['organNewManager:view'];
			this.organNewManager_btn_edit = this.elements['organNewManager:btn_edit'];
			this.organNewManager_btn_del = this.elements['organNewManager:btn_del'];
			this.organNewManager_btn_add = this.elements['organNewManager:btn_add'];
			this.organNewManager_btn_download = this.elements['organNewManager:btn_download'];
			this.organNewManager_btn_uploading = this.elements['organNewManager:btn_uploading'];
		},
		computed: {
			...mapGetters([
				'elements'
			])
		},
		methods: {
			//点击查看按钮
			checkedFn(data) {
				this.dialogStatus = 'checked';
				this.dialogFormVisibleView = true;
				this.form = data
				this.jgAddOpton = this.form.organType
				this.ztAddOpton = this.form.state
			},
			getFile: function(event) {
				this.file = event.target.files[0];
				console.log(this.file);
			},
			submit: function(event) {
				//阻止元素发生默认的行为
				event.preventDefault();
				let upFile = new FormData();
				upFile.append("file", this.file);
				let config = {
					headers: {
						'Content-Type': 'multipart/form-data' //之前说的以表单传数据的格式来传递fromdata
					}
				};
				this.$confirm('此操作将上传文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let that = this;
					if(that.file) {
						that.fullscreenLoading = true;
						config.headers['Authorization'] = getToken();
						axios.post('/api/organNew/importExcel', upFile, config)
							.then(function(response) {
								that.fullscreenLoading = false;
								alert(response.data.message);
								window.location.reload();
							})
							.catch(function(error) {
								that.fullscreenLoading = false;
								alert("上传失败");
								console.log(error);
								// window.location.reload();
							})
					} else {
						alert("请选择文件");
					}

				});
			},
			getList() {
				this.listLoading = true;
				page(this.OrganNew)
					.then(response => {
						this.list = response.data.rows;
						this.total = response.data.total;
						this.listLoading = false;
					})
			},
			// 创建时 获取机构类型的值
			getjgSel(val) {
				this.form.organType = val
			},
			// 创建时 获取状态的值
			getztSel(val) {
				this.form.state = val
			},
			handleFilter() {
				// 状态选择赋值
				this.OrganNew.state = this.selOpton
				this.getList();
			},
			// 日期插件增加的方法 修改日期格式
			getSTime(val) {
				this.OrganNew.updateTime = val;
			},
			handleSizeChange(val) {
				this.OrganNew.limit = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.OrganNew.page = val;
				this.getList();
			},
			handleCreate() {
				this.jgAddOpton = ''
				this.ztAddOpton = ''
				this.resetTemp();
				this.dialogStatus = 'create';
				this.dialogFormVisible = true;
			},
			handleUpdate(row) {
				this.jgAddOpton = ''
				this.ztAddOpton = ''
				getObj(row.id)
					.then(response => {
						this.form = response.data;
						this.jgAddOpton = this.form.organType
						this.ztAddOpton = this.form.state
						this.dialogFormVisible = true;
						this.dialogStatus = 'update';
					});
			},
			handleDelete(row) {
				this.$confirm('此操作将作废这条数据, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						delObj(row)
							.then((result) => {
								if(result.status == 0) {
									this.dialogFormVisible = false;
									const index = this.list.indexOf(row);
									this.list.splice(index, 1);
									this.$notify({
										title: '成功',
										message: result.message,
										type: 'success',
										duration: 2000
									});
								} else {
									this.$notify({
										title: '失败',
										message: result.message,
										type: 'warning',
										duration: 2000
									});
								};
							});
					});
			},
			create(formName) {
				const set = this.$refs;
				set[formName].validate(valid => {
					if(valid) {
						addObj(this.form)
							.then((result) => {
								if(result.status == 0) {
									this.dialogFormVisible = false;
									const index = this.list.indexOf(row);
									this.list.splice(index, 1);
									this.$notify({
										title: '成功',
										message: result.message,
										type: 'success',
										duration: 2000
									});
								} else {
									this.$notify({
										title: '失败',
										message: result.message,
										type: 'warning',
										duration: 2000
									});
								};
							})
					} else {
						return false;
					}
				});
			},
			cancel(formName) {
				this.dialogFormVisible = false;
				this.dialogFormVisibleView = false;
				const set = this.$refs;
				set[formName].resetFields();
			},
			update(formName) {
				const set = this.$refs;
				set[formName].validate(valid => {
					if(valid) {
						//						this.dialogFormVisible = false;
						this.form.password = undefined;
						putObj(this.form.id, this.form).then((result) => {
							if(result.status == 0) {
								this.dialogFormVisible = false;
								this.getList();
								this.$notify({
									title: '成功',
									message: result.message,
									type: 'success',
									duration: 2000
								});
							} else {
								this.$notify({
									title: '失败',
									message: result.message,
									type: 'warning',
									duration: 2000
								});
							}
						});
					} else {
						return false;
					}
				});
			},
			resetTemp() {
				this.form = {
					username: undefined,
					name: undefined,
					sex: '男',
					password: undefined,
					description: undefined
				};
			}
		}
	}
</script>
<style lang="scss">
	.organnewpage {
		.el-table .cell {
			padding-left: 5px;
			padding-right: 5px;
		}
		.el-button+.el-button {
			margin-left: 4px;
		}
		.el-button--small {
			padding: 7px 7px;
		}
	}
</style>